<template>
  <div class="anologin">
     <div class="tops">
        <!-- <i @click="back" class="iconfont el-icon-back"></i>
        <span>手机号登录</span>
        <el-tag type="info" size="mini" v-show="passwordlogin && vertificatelogin" @click="changelogin">验证码登录</el-tag>
        <el-tag type="info" size="mini" v-show="!passwordlogin && vertificatelogin" @click="changelogin">手机号登录</el-tag> -->
        <img src="~assets/img/plogin.png" v-show="!changeEmail">
        <img src="~assets/img/emailLogin.png" v-show="changeEmail">
        <div style="width:47px;height:50px;position:absolute;left:0;top:0;cursor:pointer;" @click="changeLogin" v-show="!changepassword"></div>
        <div style="width:200px;height:50px;position:absolute;left:0;top:0;background-color:#fff;line-height:50px" @click="toLogin" v-show="changepassword">
          <span style="font-size:12px;padding-left:10px;cursor:pointer">＜返回登录</span>
        </div>
      </div>
    <!--<div class="point" v-show="vertificatelogin">
      <p>登录体验更多精彩</p>
      <p>未注册手机号登陆后将自动创建账号</p>
    </div>-->
    <div class="center">
      <div class = "centers">
        <div style="height:50%;border-bottom:1px solid rgb(216,216,216);overflow:hidden;display:flex">
          <div style="width:30%;height:100%;border-right:1px solid rgb(216,216,216);display:flex;align-items:center" v-show="!changeEmail">
            <i class="iconfont icon-shouji" style="width:30px;text-align:center"></i>
            <el-dropdown 
              class="login-dropdown" 
              size="mini" 
              placement="bottom-start"
              @command="handleCommand"
            >
              <span class="el-dropdown-link" style="padding:0;font-size:12px">
                +{{countryitem}}
                <i class="iconfont icon-htmal5icon03" style="padding:0;font-size:12px;color:rgb(153,153,153)"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  v-for="(items,i) in countryCode" :key="i" :command="items[1]">
                    {{items[0]}}
                    <span style='position:absolute;right:3px'>+{{items[1]}}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
          <i class="iconfont icon-youxiang" style="width:30px;text-align:center;height:100%;line-height:40px" v-show="changeEmail"></i>
          <input type="text" :placeholder="!changeEmail ?'请输入手机号':'输入邮箱账号'" v-model="phone" >
        </div>
        <div style="display:flex;height:49%;" @click="changecorrect">
          <div style="display:flex;align-items:center;width:30px;justify-content:center">
            <i class="iconfont icon-jiesuo" ></i>
            
          </div>
          <input type="password" :placeholder="changepassword?'设置登录密码':'请输入密码'" style="padding-left:0" v-model="password" >
          <div style="display:inline;color:rgb(177,169,187);font-size:12px;margin:auto 0;cursor:pointer;padding-left:20px;" 
              @click="changePassword" 
              v-show="!changepassword">重设密码</div>
        </div>
      </div>
      <div class="elbutton">
        <div style="margin-top:15px;font-size:12px;color:rgb(199,46,46)" :style="{visibility : isCorrect ? 'hidden' : 'visible'}">
          <i class="iconfont icon-31tishi" v-show="!changepassword"></i>
           <span> 用户名或密码错误</span>
           <!-- <span v-show="changepassword && !changeEmail"> 密码8-20位，至少包含字母/数字/字符2种组合</span> -->
        </div>
        <el-button @click="phoneLogin">登 录</el-button>
        <!-- <el-button @click="phoneLogin" v-show="zhuce">注 册</el-button> -->
        <div style="text-align:center;cursor:pointer"  v-show="!changepassword">
          <!-- <a style="color:rgb(51,51,51)" @click="ZhuCe">注册</a>  -->
        </div>
      </div>
    </div>
    
    <div class="bottom">
      <!-- <div style="margin:0 auto" v-show="!changepassword&&zhuce">其他注册方式</div> -->
      <div class="loginway">
        <i class="iconfont icon-weixin1" style="--i:rgb(104,182,51)"></i>
        <i class="iconfont icon-QQ2" style="--i:rgb(52,160,223)"></i>
        <i class="iconfont icon-weibo" style="--i:rgb(234,75,75)"></i>
        <i class="iconfont icon-netease" style="--i:rgb(234,75,75)" @click="changeEMail"></i>
      </div>
      <div class="protocal">
        <input type="checkbox" style="position:relative;top:3px" @click="changeCheckState">
        <span>同意</span>
        <a href="https://st.music.163.com/official-terms/service">《服务条款》</a>
        <a href="https://st.music.163.com/official-terms/privacy">《隐私政策》</a>
        <a href="https://st.music.163.com/official-terms/children">《儿童隐私政策》</a>
      </div>
    </div>
    <!--
    <div class="center" v-show="vertificatelogin">
      <div>
        
        <input type="text" placeholder="请输入手机号" v-model="phone">
      </div>
      <div v-show="passwordlogin"><input :type="inputState" placeholder="请输入密码" v-model="password"><i class="iconfont el-icon-view" @click="changeInput"></i></div>
      
    </div>
    
    
    <text-vertificate :phonenumbers="phone" v-show="!vertificatelogin" ref="textvertificate" @CheckNums="CheckNums"></text-vertificate> -->
  </div>
</template>

<script>
// import TextVertificate from 'components/common/text-vertificate/textvertificate'
import {request} from 'network/request'
import {countryCode} from './countrycode.js'
export default {
  name:"loginPhone",
  components:{
    // TextVertificate
  },
  data(){
    return{
      phone:'',
      password:'',
      passwordlogin:true,
      vertificatelogin:true,
      inputState:'password',
      countryCode,
      countryitem:'86',
      isCorrect:true,
      checkState:false,
      changepassword:false,
      zhuce:false,
      changeEmail:false,
      // checkNums:true,
      // checkNum:''
      // reg: /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
    }
  },
  methods:{
    changeLogin(){
      this.$parent.$parent.anologin = false
      this.$parent.$parent.QRlogin = true
      this.$parent.$parent.Open()
      // console.log(this.$parent.$parent)
    },
    handleCommand(command) {
      // console.log('click on item ' + command);
      this.countryitem = command
    },
    changeCheckState(){
      this.checkState = !this.checkState
    },
    changePassword(){
      this.changecorrect()
      this.changepassword = !this.changepassword
    },
    changecorrect(){
      this.isCorrect = true
    },
    changeEMail(){
      this.changePassword()
      this.changeEmail = !this.changeEmail
    },
    // ZhuCe(){
    //   this.changecorrect()
    //   this.zhuce = !this.zhuce
    // },
    toLogin(){
      if(this.changepassword === false){
        // this.ZhuCe()
      }else if(this.changeEmail === false){
        this.changePassword()
      }

      if(this.changeEmail === true){
        this.changeEMail()
      }
    },
    back(){
      this.$router.go(-1)
    },
    // changelogin(){
      
    //   this.passwordlogin = !this.passwordlogin
    //   this.password = ''
    // },
    // vertificate(){
    //   let reg = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
    //   if(!reg.test(this.phone)){
    //     this.$message.error('请输入正确的手机号！');
    //     return
    //   }
    //   this.sendCheckNum()
    //   this.vertificatelogin = !this.vertificatelogin
    //   this.$refs.textvertificate.handleClick()
    // },
    // async sendCheckNum(){
    //   await request("GET",'captcha/sent',{phone:this.phone})
    //   // console.log(data)
    // },
    // CheckNums(capt){
    //   // alert(capt)
    //   request("GET",'captcha/verify',{phone:this.phone,captcha:capt}).then(data=>{
    //     if(data.data === true){
    //       this.$router.push('profile')
    //     }
    //   }).catch(()=>{
    //     this.$message.error('登录失败')
    //     setTimeout(() => {
    //       this.passwordlogin = !this.passwordlogin
    //       this.vertificatelogin = !this.vertificatelogin
    //     }, 1000);
    //   }) 
    //   // window.sessionStorage.setItem('cookie', data.cookie)
     
    //     // const data = await request("GET",'login/status')
    //     // console.log(data)
    // },
    async phoneLogin(){
      if(this.checkState === true){
        var data = null
        // if(this.changepassword === false){
          
          if(this.changeEmail === true){
            data = await request("GET",'login',{email:this.phone,password:this.password})
          }else{
            try{
              data = await request("GET",'login/cellphone',{phone:this.phone,password:this.password,countrycode:this.countryitem})
            }catch(e){
              this.isCorrect = false
            }
          }
        // }else {
        //   data = await request("GET",'register/cellphone',{phone:this.phone,password:this.password,countrycode:this.countryitem})
        // }
        if(data.code !== 200){
          console.log('ss')
          return this.isCorrect = false
        }
        localStorage.setItem('cookie', data.cookie)
        location.reload()
      }else{
        this.$notify({
          title: '提示',
          message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》',
          type:'warning',
          duration:3000
        });
        // this.$toast.show('请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》')
      }
    },  
      // console.log(data)
      
      // if(data.code === 200){
      //   const data1 = await request("GET",'user/subcount')
      //   console.log(data1)
      //  }
      
      // window.sessionStorage.setItem('profile',JSON.stringify(data.profile))
      // this.$store.commit('userInfo',data.profile)
      // this.$store.commit('changeislogin')
      // this.$router.push('profile')
    
    // changeInput(){
    //   if(this.inputState === 'password'){
    //     this.inputState = 'text'
    //     // console.log('sss')
    //     return
    //   }
    //   this.inputState = 'password'
    // }
  }
}
</script>

<style scoped>
.anologin{
  /* display: flex; */
  flex-direction:column;
  
  /* justify-content: center; */
  /* align-items: center; */
}
.tops{
  width:305px;
  height: 197px;
  /* position:absolute; */
  /* left: 0;
  top: 0; */
}
.tops img{
  width:305px;
  height: 197px;
}
.centers{
  border: 1px solid rgb(216,216,216);
  width: 75%;
  height: 75px;
  margin: 0 auto;
  border-radius: 5px;
}
.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  /* height: 200px; */
}
input{
  border:0;
  font-size: 12px;
  outline: none;
  padding-left: 10px;
  /* width: 60%;  */
}
input::-webkit-input-placeholder {
  color: rgb(177,169,187);
}
input::-moz-input-placeholder {
  color: rgb(204,204,204);
}
input::-ms-input-placeholder {
  color: rgb(204,204,204);
}
::v-deep.el-dropdown-menu{
  /* width:150px; */
  height:200px !important;
  overflow-y:scroll;
  padding: 0;
}
.el-dropdown-menu::-webkit-scrollbar{
  width: 5px;
  height: 100%;
  border-radius: 10px;
}
.el-dropdown-menu::-webkit-scrollbar-thumb{
  background-color: rgb(212,212,212);
  border-radius: 3px;
}
.el-dropdown-menu__item{
  font-size: 10px;
  line-height: 20px;
  padding: 0 10px;
}
.el-dropdown-menu__item:hover{
  background-color: rgb(212,212,212);
  color: #000;
}
.elbutton{
  /* margin: 0 auto; */
  width: 75%;
  
}
.elbutton .el-button{
  width: 100%;
  background-color: rgb(234,72,72);
  border:rgb(234,72,72);
  /* height: 41px; */
  font-size: 16px;
  color: #fff;
  margin: 15px 0 15px;

  /* font-weight: lighter; */
}
.elbutton .el-button:hover{
  background-color: rgb(199,46,46);
}
.bottom{
  
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loginway{
  margin:28px 0 40px;
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loginway i::before{
  cursor: pointer;
  padding: 7px;
  font-size: 23px;
  border-radius: 50%;
  border: 1px solid rgb(201,201,201);
  color: var(--i);  
}
.loginway i:hover::before{
  color: #fff;
  background-color: var(--i);
  border-color:var(--i);
}
.protocal{
  width: 85%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.protocal a{
  text-decoration: none;
  color: rgb(80,125,175);
}
/* ::v-deep { */
  /* width: 100px; */
  /* transform-origin: center bottom; */
/* } */
/* .tops::after{
  width: 100px;
  height: 100px;
  background-color: red;
  /* z-index: 100; 
} */
 /*  .tops{
    
    font-size: 22px;
    display: flex;
    align-items: center;
  }
  .tops i{
    padding: 14px;
    font-size: 30px;
  }
  .el-tag{
    padding: 7px 7px;
    height: 30px;
    position: absolute;
    right: 15px;
    border-radius: 30px;
    background-color: #fff;
    color: #000;
    
  }
  .el-tag:active{
    background-color: rgb(204,204,204);
  }
  .point{
    width: 91%;
    margin:28px auto 0px auto;
    font-weight:lighter;
    font-size: 15px;
    color: rgb(148, 146, 146);
  }
  .point :first-child{
    padding-bottom: 6px;
    font-weight: normal;
    font-size: 22px;
    color: rgb(52, 52, 52);
  }
  
  .center{
    /* width: 95%; */
    /* display: flex;
    flex-direction: column ; 
    margin: 0 auto;
    width: 91%;
  }
  .center div{
    width: 100%; 
    padding:45px 0 7px;
    border-bottom: 1px solid rgb(204,204,204);
  }
  .el-icon-view{
    position: absolute;
    right: 20px;
    font-size: 20px;
  }
  .el-dropdown{
    width: 70px!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
  }
  .el-dropdown-link{
    font-size: 22px;
  }
  .elbutton{
    margin: 0 auto;
    width: 91%;
  }
  .el-button{
    width: 100%;
    background-color: rgb(253,57,58);
    border:rgb(253,57,58);
    height: 41px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin:35px 0

  }
  .text-vertificate { 
    margin: 5%;
  } */
</style>